<template>
	<view class='details'>
		<!--商品图-->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image class='swiper-img' :src="goodsContent.imgUrl" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!--价格和名称-->
		<view class='details-goods'>
			<view class='goods-pprice'>折扣价：¥{{goodsContent.pprice}}</view>
			<view class='goods-oprice'>¥<del>{{goodsContent.oprice}}</del></view>
			<view class='goods-name'>{{goodsContent.name}}</view>
		</view>
		<Card cardTitle='买了又买'></Card>
		<CommodityList :dataList='dataList'></CommodityList>
		<!--底部-->
		<view class='details-foot'>
			<view class='iconfont icon-xiaoxi'></view>
			<view class='iconfont icon-24gl-cartFull8' @tap='goShopCart'></view>
			<view class='add-shopcart' @tap='showPop'>加入购物车</view>
			<view class='purchase' @tap='showPop'>立即购买</view>
		</view>

		<!--底部弹出层-->
		<view class="pop" v-show='isShow' @touchmove.stop.prevent="">
			<!--蒙层-->
			<view class='pop-mask' @tap='hidePop'></view>
			<!--内容块-->
			<view class='pop-box' :animation="animationData">
				<view class="pop-top">
					<image class='pop-img' :src="goodsContent.imgUrl" mode=""></image>
					<view class="pop-top-text">
						<text>{{goodsContent.name}}</text>
						<text>价格：￥{{goodsContent.pprice*num}}</text>
					</view>
					
				</view>
				<view class='pop-num'>
					<view>购买数量</view>
					<UniNumberBox min='1' :value="num" @change='changeNumber'></UniNumberBox>
				</view>
				<view class='pop-sub' @tap='addCart'>
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onBackPress,
		onLoad,
		onNavigationBarButtonTap
	} from "@dcloudio/uni-app"
	import $http from '@/common/api/request.js'
	import Card from '@/components/common/Card.vue'
	import CommodityList from '@/components/common/CommodityList.vue'
	import UniNumberBox from '@/components/uni/uni-number-box/uni-number-box.vue'
	import {
		ref
	} from "vue"
	import { usecartStore } from '@/store/cart.js'
	import { userStore } from '@/store/user.js'
	import { storeToRefs } from 'pinia'
	const cartStore = usecartStore()
	const userListStore = userStore()
	const { list,addShopCart } = storeToRefs(cartStore)
	const { loginStatus } = storeToRefs(userListStore)
	const isShow = ref(false) 
	const goodsContent = ref({}) //商品信息
	const animationData = ref({}) //动画
	const num = ref(1) //数量
	const dataList = ref([
						{
							id: 2,
							imgUrl: "../../static/img/commodityList/commodityList2.jpg",
							name: "新款连衣裙2023，韩版大款",
							pprice: "299",
							oprice: "659",
							discount: "5.2"
						},
						{
							id: 3,
							imgUrl: "https://tuchuangs.com/imgs/2023/04/13/f7b00632cfd9887b.jpg",
							name: "彻底摆脱脚臭，灌装瓶",
							pprice: "50",
							oprice: "85",
							discount: "6.2"
						},
						{
							id: 4,
							imgUrl: "https://tuchuangs.com/imgs/2023/04/13/4241314d773a1c3c.jpg",
							name: "薰衣草味的洗衣粉",
							pprice: "67",
							oprice: "72",
							discount: "9"
						},{
							id: 5,
							imgUrl: "https://tuchuangs.com/imgs/2023/04/13/50c28dd60eadde6e.jpg",
							name: "化妆台上必备化妆镜",
							pprice: "9.9",
							oprice: "20",
							discount: "5"
						},
						{
							id: 6,
							imgUrl: "https://tuchuangs.com/imgs/2023/04/13/b351ec5cb9787418.jpg",
							name: "苹果13上线了，快来订购吧",
							pprice: "4399",
							oprice: "5800",
							discount: "8"
						}
	])
	onLoad((e) => {
		getData(e.id)
	})
	// 请求数据
	const getData = (id) => {
		$http.request({
			url: "/goods/id",
			data: {
				id: id
			}
		}).then((res) => {
			goodsContent.value = res[0];
		}).catch(() => {
			uni.showToast({
				title: '请求失败',
				icon: 'none'
			})
		})
	}
	// 点击返回按钮只关闭蒙层,不返回上一级
	onBackPress(() => {
		if (isShow.value) {
			hidePop()
			return true;
		}
	})
	//点击分享
	onNavigationBarButtonTap((e) => {
		if (e.type === 'share') {
			uni.share({
				"provider": "weixin",
				"type": 0,
				"scene": "WXSceneSession",
				"title": goodsContent.name,
				"href": "http://192.168.56.1:5173/#/pages/details/details?id=" + goodsContent.id + "",
				imageUrl: goodsContent.imgUrl,
				success: function(res) {
					uni.showTabBar({
						title: "分享成功"
					})
				},
				fail: function(err) {
					console.log("fail:" + JSON.stringify(err));
				}
			})
		}
	})
	//改变商品数量
	const changeNumber=(value)=>{
		num.value=value
	}
	// 跳转到购物车页面
	const goShopCart =()=>{
		uni.navigateTo({
			url:'../cart/cart'
		})
	}
	const goShop=()=>{
		
	}
	// 动画出现
	const showPop = () => {
		var animation = uni.createAnimation({
			duration: 200
		})
		animationData.value = animation
		animation.translateY(1000).step();
		animationData.value = animation.export();
		isShow.value = true;
		setTimeout(() => {
			animation.translateY(0).step();
			animationData.value = animation.export();
		}, 200)
	}
	// 动画退出
	const hidePop = () => {
		var animation = uni.createAnimation({
			duration: 200
		})
		animation.translateY(600).step();
		animationData.value = animation.export();
		isShow.value = true;
		setTimeout(() => {
			animation.translateY(0).step();
			isShow.value = false;
		}, 200)
	}
	// 加入购物车成功
	const addCart =()=>{
		if(userListStore.loginStatus){
			$http.request({
				url:"/addCart",
				method:"POST",
				data:{
					goods_id:goodsContent.value.id,
					num:num.value
				},
				header:{
					token:true
				}
			}).then((res)=>{
				//隐藏弹出框
				hidePop();
				//提示信息
				uni.showToast({
					title:"成功加入购物车",
					icon:'none'
				})
			})
		}else{
			uni.showToast({
				title:'请先登录',
				icon:"none"
			})
			hidePop();
		}
		
	}
</script>
<style scoped>
	.details {
		background-color: #ebe6eb;
		padding-bottom: 90rpx;
	}

	swiper {
		width: 100%;
		height: 700rpx;
	}

	.swiper-img {
		width: 100%;
		height: 700rpx;
	}

	.details-goods {
		background-color: #fffffc;
		text-align: center;
		font-weight: bold;
		font-size: 46rpx;
		border-radius: 30rpx;
		padding: 5rpx 0;
		margin: 0 10rpx 10rpx 10rpx;
	}
	.details-foot {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
	}

	.details-foot .iconfont {
		width: 60rpx;
		height: 60rpx;
		border-radius: 100%;
		background-color: #000000;
		color: #FFFFFF;
		text-align: center;
		margin: 0 10rpx;
	}
	.goods-pprice{
		color: #49BDFB;
	}
	.goods-oprice{
		color: red;
	}
	.add-shopcart {
		margin: 0 40rpx;
		padding: 6rpx 30rpx;
		background-color: #000000;
		color: #FFFFFF;
		border-radius: 40rpx;
	}

	.purchase {
		margin: 0 40rpx;
		padding: 6rpx 30rpx;
		background-color: #49BDFB;
		color: #FFFFFF;
		border-radius: 40rpx;
	}

	.pop {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
	}

	.pop-mask {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.pop-box {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #FFFFFF;
	}
	.pop-top{
		display: flex;
	}
	.pop-top-text{
		position: relative;
		top: 20rpx;
		left: 20rpx;
		display: flex;
		flex-direction: column;
	}
	.pop-img {
		width: 260rpx;
		height: 260rpx;
		margin: 10rpx;
	}

	.pop-num {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.pop-sub {
		line-height: 80rpx;
		background-color: #49BDFB;
		color: #FFFFFF;
		text-align: center;
	}
</style>